<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<style type="text/css">
.ui-widget {
	font-size: 12px !important;
}
</style>
</h:head>

<h:body>

	<ui:composition template="Layout.xhtml">
		<ui:define name="content">

			<!-- <p:ajaxStatus style="width:16px;height:16px;">
				<f:facet name="start">
					<h:graphicImage value="img/ajaxLoader.gif" />
				</f:facet>

				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus> -->

			<h:form>

				<p:panel id="panel" header="Login">
					<p:messages />
					<h:panelGrid columns="3" columnClasses="column" cellpadding="5">
						<h:outputLabel for="email" rendered="#{!sessionBean.loggedIn}"
							value="Email: " />
						<h:outputLabel rendered="#{sessionBean.loggedIn}"
							value="#{sessionBean.user.email}" />
						<p:inputText id="email" rendered="#{!sessionBean.loggedIn}"
							value="#{sessionBean.user.email}" required="true" label="Email">
							<f:validator validatorId="EmailValidator" />
						</p:inputText>
						<p:message for="email" />

						<h:outputText rendered="#{!sessionBean.loggedIn}"
							value="Password: " />
						<p:password id="password" rendered="#{!sessionBean.loggedIn}"
							value="#{sessionBean.user.password}" required="true"
							label="Password" feedback="false" />
						<p:message for="password" />

					</h:panelGrid>

					<p:commandButton id="loginBtn" value="Login"
						rendered="#{!sessionBean.loggedIn}" update="panel"
						action="#{sessionBean.login}" />
					<p:commandButton id="logoutBtn" value="Logout"
						rendered="#{sessionBean.loggedIn}" update="panel"
						action="#{sessionBean.logout}" />
				</p:panel>
			</h:form>

			<script type="text/javascript">
				function fadein(input, container) {
					container.fadeIn("slow");
				}

				function fadeout(input, container) {
					container.fadeOut("slow");
				}
			</script>

		</ui:define>
	</ui:composition>

</h:body>
</html>
